<template>
  <j-modal
    switchFullscreen
    :title='title'
    :width='900'
    :visible='visible'
    :maskClosable='false'
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary" v-if="!disableSubmit">确认</a-button>
    </template>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24'>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='经销商编号'
              >
              <a-input-search  v-decorator="['customerCode',validatorRules.customerCode]" :disabled='disableSubmit||disableEdit'
                              readOnly enter-button @search="custSearch('superiorUser')" />
              <a-input  type='hidden' v-decorator="['customerCode']" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='经销商名称'
              >
              <a-input placeholder='请输入' disabled="true" v-decorator="['customerName']" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='产品编号'
            >
              <a-input-search  v-decorator="['productCode',validatorRules.productCode]" :disabled='disableSubmit||disableEdit'
                               readOnly enter-button @search="productSearch('productUser')" />
              <a-input type='hidden' v-decorator="['productCode']" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='产品名称'
              >
              <a-input :disabled='true' placeholder='请输入' v-decorator="['productName', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='数量(件)'
              >
              <a-input placeholder='请输入' :disabled='disableSubmit' v-decorator="['productCount',validatorRules.productCount]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='有效期'
            >
              <a-range-picker style='width:100%' format="YYYY-MM-DD" :disabled='disableSubmit' value-format="YYYY-MM-DD" v-decorator="['policyDate',validatorRules.policyDate]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='批次日期'
            >
              <a-range-picker style='width:100%' format="YYYY-MM-DD" :disabled='disableSubmit' value-format="YYYY-MM-DD" v-decorator="['batchDate',validatorRules.batchDate]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注">
              <a-textarea placeholder="请输入备注" :disabled='disableSubmit' v-decorator="['remarks', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <proChose ref="prochoose" @okbro="okbropro"></proChose>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import proChose from '@comp/cn-components/ProChose'
import { pick } from 'lodash'

export default {
  name: 'giftModal',
  data() {
    return {
      disableSubmit: false,
      disableEdit:false,
      dataSurces: [],
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        customerCode: {
          rules: [
            { required: true, message: ''}
          ]
        },
        productCode: {
          rules: [
            { required: true, message: ''}
          ]
        },
        productCount: {
          rules: [
            { required: true, message: ''}
          ]
        },
        policyDate: {
          rules: [
            { required: true, message: ''}
          ]
        },
        batchDate: {
          rules: [
            { required: true, message: ''}
          ]
        },
      },
      addOrUpdateUrl: window._CONFIG['domianPromotion'] + '/bigdateassign/dmsBigDateAssign/saveOrUpdate'
    }
  },
  components: {proChose },
  created() {
    // console.log(this.areaData);
  },
  methods: {
    okbropro(val, status, status2) {
      // console.log('数据',val)
      let objs = JSON.parse(JSON.stringify(val[0]))
      console.log('弹出框数据111',objs)
      if(status == 'superiorUser'){
        this.form.setFieldsValue({
          customerCode: objs.customerCode,
          customerName: objs.customerName
        })
      }else if(status == 'productUser'){
        this.form.setFieldsValue({
          productCode: objs.productCode,
          productName: objs.productName
        })
      }

    },
    add() {
      this.edit()
    },
    edit(record) {
      this.form.resetFields()
      console.log('查询数据111', record)
      this.model = Object.assign({}, record)
      this.visible = true
      if(record != undefined){
        this.model.policyDate = this.model.policyDate.split("~")
        this.model.batchDate = this.model.batchDate.split("~")
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))//表单初始化，值源于this.model
      })
    },
    handleCancel() {
      this.$emit('close')
      this.visible = false
    },
    custSearch(status) {
      // console.log('数据',status)
      this.$refs.prochoose.rowKey='id'
      let formconfig = [
        {
          key: 'customerCode',
          label: '经销商编号'
        },
        {
          key: 'customerName',
          label: '经销商名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '经销商编号',
            align: 'center',
            dataIndex: 'customerCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '经销商名称',
            align: 'center',
            dataIndex: 'customerName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/customer/cnCustomer/findPageList',
        multiple: false,
        columW: 8
      }
      let dataSource = []
      if(this.form.getFieldValue('superiorUser')){
        dataSource = [{
          userName: this.form.getFieldValue('superiorUser'),
          realName: this.form.getFieldValue('realName')
        }]
      }
      this.name = '经销商'
      this.$refs.prochoose.edit(formconfig, tableconfig,'superiorUser', 'realsname',dataSource)
    },
    productSearch(status) {
      this.$refs.prochoose.rowKey='custCode'
      let formconfig = [
        {
          key: 'productCode',
          label: '产品编号'
        },
        {
          key: 'productName',
          label: '产品名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '产品编号',
            align: 'center',
            dataIndex: 'productCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: 'productName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/products/cnProduct/findPageList',
        multiple: false,
        columW: 8
      }
      let dataSource = []
      if(this.form.getFieldValue('productCode')){
        dataSource = [{
          productCode:this.form.getFieldValue('productCode'),
          productName:this.form.getFieldValue('productName')
        }]
      }
      this.name = '产品'
      this.$refs.prochoose.edit(formconfig, tableconfig, status,'status2',dataSource)
    },
    handleOk() {
      let that = this
      this.form.validateFields((err, value) => {
        if (!err) {
          let obj = Object.assign({}, this.model, value)
          console.log('提交数据',obj)
          obj.policyDate = obj.policyDate.join('~')
          obj.batchDate = obj.batchDate.join('~')
          postAction(this.addOrUpdateUrl, obj).then(res => {
            if (res.success) {
              that.$message.success(res.message, 2)
              that.$emit('ok')
              that.handleCancel()
            } else {
              that.$message.error(res.message, 2)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    }

  }
}
</script>

<style lang='less' scoped>
.info-line {
  display: flex;
  flex-direction: row;
}

.info-line:before {
  content: "";
  flex: 0.1;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}
.info-line:after {
  content: "";
  flex: 0.9;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}
</style>